<template>
  <el-card class="online-card-table base-card" shadow="never" :body-style="{ padding: '0px' }">
    <el-row>
      <el-col
        :span="24"
        :style="{
          height: widget.props.height != null ? widget.props.height - 53 + 'px' : undefined,
        }"
      >
        <OnlineCustomTable
          ref="customTable"
          :dataList="tableWidget.dataList"
          :widget="widget"
          :height="widget.props.height ? widget.props.height - 53 : 200"
          border="default"
          :multiSelect="batchDelete"
          :operationList="widget.operationList"
          :getTableIndex="tableWidget.getTableIndex"
          :sortChange="tableWidget.onSortChange"
          :saveRow="onSaveRow"
          :supportCustomQuery="false"
          rowKey="__cascade_add_id__"
          :onSelectChange="onSelectRowChange"
          @operationClick="onOperationClick"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus';
import { ANY_OBJECT } from '@/types/generic';
import { useTable } from '@/common/hooks/useTable';
import { TableOptions } from '@/common/types/pagination';
import { OnlineFormEventType, SysCustomWidgetOperationType } from '@/common/staticDict';
import { findItemFromList } from '@/common/utils';
import OnlineCustomTable from './OnlineCustomTable.vue';

const emit = defineEmits<{ input: [ANY_OBJECT[]] }>();

const props = withDefaults(
  defineProps<{
    value: Array<ANY_OBJECT>;
    widget?: ANY_OBJECT;
  }>(),
  { value: () => [], isEdit: false, showBorder: true, widget: undefined },
);

const form = inject('form', () => {
  console.error('OnlineCardTable: form not injected');
  return { isEdit: false } as ANY_OBJECT;
});

const selectRows = ref<ANY_OBJECT[]>([]);
const batchDelete = ref(false);
const customTable = ref();

const loadTableData = () => {
  return Promise.resolve({
    dataList: props.value,
    totalCount: props.value.length,
  });
};
const loadTableDataVerify = () => {
  return true;
};
const tableOptions: TableOptions<ANY_OBJECT> = {
  loadTableData: loadTableData,
  verifyTableParameter: loadTableDataVerify,
};
const tableWidget = reactive(useTable(tableOptions));

const refresh = () => {
  tableWidget.refreshTable(true, 1);
};

const onSaveRow = (row, autoEditNext, res) => {
  let { rowData, nextRow, isNew, isDirty } = res;
  if (rowData.__cascade_add_id__ == null) {
    let tempId = new Date().getTime();
    row.__cascade_add_id__ = tempId;
    rowData.__cascade_add_id__ = tempId;
  }
  onTableDataListChange(
    tableWidget.dataList.map(item => {
      if (rowData.__cascade_add_id__ != null) {
        return rowData.__cascade_add_id__ === item.__cascade_add_id__ ? rowData : item;
      } else {
        return rowData[props.widget.primaryColumnName] === item[props.widget.primaryColumnName]
          ? rowData
          : item;
      }
    }),
  );
};

watch(
  () => props.value,
  () => {
    refresh();
  },
  {
    deep: true,
    immediate: true,
  },
);

// Jie. 20250423 表格添加数据方法
const addTableData = (row: ANY_OBJECT | ANY_OBJECT[] | null) => {
  if (row == null) {
    return;
  }
  if (typeof row === 'object') {
    onTableDataListChange([
      ...tableWidget.dataList,
      {
        ...row,
        __cascade_add_id__: new Date().getTime(),
      },
    ]);
  }
  if (Array.isArray(row)) {
    onTableDataListChange([
      ...tableWidget.dataList,
      ...row.map((item, index) => {
        return {
          ...item,
          __cascade_add_id__: new Date().getTime() + index,
        };
      }),
    ]);
  }
};

// Jie. 20250423 表格添加清空方法
const clearTableData = () => {
  onTableDataListChange([]);
};

const handlerEditOperate = (row: ANY_OBJECT | null, res: ANY_OBJECT) => {
  if (props.widget.relation != null) {
    if (row == null) {
      console.log('新增记录', res, props, tableWidget);
      // 新增记录
      row = res[props.widget.relation.variableName];
      onTableDataListChange([
        ...tableWidget.dataList,
        {
          ...row,
          __cascade_add_id__: new Date().getTime(),
        },
      ]);
    } else {
      console.log('更新记录', res, props, tableWidget);
      // 更新记录
      row = res[props.widget.relation.variableName];
      onTableDataListChange(
        tableWidget.dataList.map((item: ANY_OBJECT) => {
          if (row != null && row.__cascade_add_id__ != null) {
            return row.__cascade_add_id__ === item.__cascade_add_id__ ? row : item;
          } else {
            return row != null &&
              row[props.widget.primaryColumnName] === item[props.widget.primaryColumnName]
              ? row
              : item;
          }
        }),
      );
    }
  }
};
const onSelectRowChange = (rows: ANY_OBJECT[]) => {
  selectRows.value = rows;
};
const onOperationClick = (operation: ANY_OBJECT, row: ANY_OBJECT | null) => {
  if (operation.type === SysCustomWidgetOperationType.BATCH_DELETE) {
    onBatchDelete(operation);
  } else if (operation.type === SysCustomWidgetOperationType.DELETE && row != null) {
    onDeleteRow(row);
  } else if (operation.type === SysCustomWidgetOperationType.SCRIPT) {
    form()
      .handlerScriptOperation(operation, row)
      .then(() => {
        refresh(true);
      })
      .catch(e => {
        console.warn(e);
      });
  } else if (operation.type === SysCustomWidgetOperationType.SELECT_DIALOG) {
    if (form().showSelectDialog) {
      const masterTableData = !form().isEdit
        ? form().getMasterTableData
          ? form().getMasterTableData()
          : undefined
        : undefined;
      const eventInfo = operation.eventInfo;
      form().showSelectDialog(
        operation.selectFormId,
        {
          rowData: row,
          masterTableData: masterTableData,
          formData: form().formData,
        },
        {
          multiSelect: operation.multiSelect,
          dialogWidth: operation.dialogWidth,
          dialogHeight: operation.dialogHeight,
        },
        form().isEdit ? undefined : eventInfo[OnlineFormEventType.DIALOG_OPEN],
        form().isEdit ? undefined : eventInfo[OnlineFormEventType.DIALOG_SUBMIT],
      );
    }
  } else {
    form().handlerOperation(operation, {
      isEdit: form().isEdit,
      saveData: false,
      widget: props.widget,
      rowData: row,
      masterTableData: form().getMasterTableData ? form().getMasterTableData() : undefined,
      callback: (res: ANY_OBJECT) => {
        handlerEditOperate(row, res);
      },
    });
  }
};
const onBatchDelete = (operation: ANY_OBJECT) => {
  console.log('onBatchDelete operation', operation);
  if (selectRows.value.length <= 0) {
    ElMessage.error('请选择要批量删除的数据！');
    return;
  }
  ElMessageBox.confirm('是否删除选中数据？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    onTableDataListChange(
      tableWidget.dataList.filter(row => {
        // 通过主键查找
        let temp = findItemFromList(
          selectRows.value,
          row[props.widget.primaryColumnName],
          props.widget.primaryColumnName,
        );
        // 通过新增临时主键查找
        if (temp == null && row.__cascade_add_id__ != null) {
          temp = findItemFromList(selectRows.value, row.__cascade_add_id__, '__cascade_add_id__');
        }
        return temp == null;
      }),
    );
  });
};
const onDeleteRow = (data: ANY_OBJECT) => {
  ElMessageBox.confirm('是否删除当前数据？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      onTableDataListChange(
        tableWidget.dataList.filter(row => {
          if (data.__cascade_add_id__ != null) {
            return data.__cascade_add_id__ !== row.__cascade_add_id__;
          } else {
            return data[props.widget.primaryColumnName] !== row[props.widget.primaryColumnName];
          }
        }),
      );
    })
    .catch(e => {
      console.warn(e);
    });
};
const onTableDataListChange = (dataList: ANY_OBJECT[]) => {
  if (
    !form().isEdit &&
    typeof props.widget.eventInfo[OnlineFormEventType.AFTER_LOAD_TABLE_DATA] === 'function'
  ) {
    console.log('afterLoadTableData', dataList, form().formData);
    dataList = props.widget.eventInfo[OnlineFormEventType.AFTER_LOAD_TABLE_DATA](
      dataList,
      form().instanceData(),
    );
  }
  emit('input', dataList);
};

onMounted(() => {
  // Jie. 20250423 增加组件ref存储
  if (form().tableInstance) {
    form().tableInstance[props?.widget?.variableName] = {
      getRef: () => {
        return customTable.value.getTableInstance();
      },
      handlerEditOperate,
      addTableData,
      clearTableData,
    };
  }
});
</script>

<style scoped>
.base-card :deep(.el-card__header) {
  padding: 0 10px !important;
}
.online-card-table :deep(.vxe-table--border-line) {
  border: none !important;
}
</style>
